<%- include('header') %>
<script src="/plugins/marked.min.js"></script>
<style>
   html, body {
	margin: 0;
	padding: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #333;
	background-color: #fbfbfb;
	height: 100%;
}

textarea {
	font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
	font-size: 12px;
	resize: none;
}

header {
	padding-top: 10px;
	display: flex;
	height: 58px;
}

header h1 {
	margin: 0;
}

.github-ribbon {
	position: absolute;
	top: 0;
	right: 0;
	border: 0;
	z-index: 1000;
}

.containers {
	display: flex;
	height: calc(100vh - 108px);
}

.container {
	flex-basis: 50%;
	padding: 5px;
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
}

.pane, .inputPane {
	margin-top: 5px;
	padding: 0.6em;
	border: 1px solid #ccc;
	overflow: auto;
	flex-grow: 1;
	flex-shrink: 1;
}

#preview {
	display: flex;
}

#preview iframe {
	flex-grow: 1;
}

#main {
	display: none;
}

.error {
	border-color: red;
	background-color: #FEE
}

</style>
<body>
<div id="main" style="display: block">
    <div class="containers">
        <div class="container">
                <textarea id="markdown" class="inputPane" onkeyup="convert()"></textarea>
        </div>
        <div class="container">
                <div id="preview" class="pane">
                        <!-- <noscript> -->
                          <!-- <h2>You'll need to enable Javascript to use this tool.</h2> -->
                        <!-- </noscript> -->
                        <!-- <iframe src="./preview.html" frameborder="0" sandbox="allow-same-origin allow-top-navigation-by-user-activation"></iframe> -->
                      </div>
            </div>
    </div>
    <!-- <textarea id="oriContent" style="height:400px;width:600px;" onkeyup="convert()"></textarea>
    <div id="result"></div> -->
</div>

<script type="text/javascript">
    function convert(){
        var text = document.getElementById("markdown").value;
        // var converter = new showdown.Converter();
        // var html = converter.makeHtml(text);
        document.getElementById("preview").innerHTML = marked(text);
    }
</script>
<%- include('footer') %>